<template>

    <!-- 步骤指示器 -->
    <view class="steps">
      <view class="step-item active">
        <view class="step-num step-num-gray">1</view>
        <view class="step-text step-text-gray">第一步</view>
      </view>
      <view class="step-line"></view>
      <view class="step-item">
        <view class="step-num step-num-gray">2</view>
        <view class="step-text step-text-gray">第二步</view>
      </view>
      <view class="step-line"></view>
      <view class="step-item">
        <view class="step-num step-num-blue">3</view>
        <view class="step-text step-text-blue">第三步</view>
      </view>
    </view>

  <!-- 表单区域 -->
  <view class="form-container">
    <!-- 4. 突发事件概述 -->
    <view class="form-item">
      <view class="form-label">
        <text class="label-text">4.突发事件概述</text>
        <view class="tips">
          <text class="tips-text">包括事件发生时间、地点、大致过程、紧急程度、破坏程度、人员伤亡、发展状态、影响程度评估等</text>
        </view>
      </view>
      <textarea class="form-input" placeholder="请说明..." />
    </view>

    <!-- 5. 学生目前情况 -->
    <view class="form-item">
      <view class="form-label">
        <text class="label-text">5.学生目前情况</text>
      </view>
      <textarea class="form-input" placeholder="请说明..." />
    </view>

    <!-- 6. 风险分析研判 -->
    <view class="form-item">
      <view class="form-label">
        <text class="label-text">6.风险分析研判</text>
      </view>
      <textarea class="form-input" placeholder="请评估..." />
    </view>

    <!-- 7. 已采取的措施及当前情况 -->
    <view class="form-item">
      <view class="form-label">
        <text class="label-text">7.已采取的措施及当前情况</text>
      </view>
      <textarea class="form-input" placeholder="请评估..." />
    </view>

    <!-- 8. 学院建议 -->
    <view class="form-item">
      <view class="form-label">
        <text class="label-text">8.学院建议</text>
      </view>
      <textarea class="form-input" placeholder="请描述学院建议..." />
    </view>

    <!-- 审批流程 -->
    <view class="approval-title">审批流程</view>
    <view class="approval-item">
      <view class="approval-circle orange"></view>
      <view class="approval-info">
        <view class="approval-name">发起人（辅导员/学工办主任）</view>
        <view class="approval-person">张小白 <text class="status">已发起</text></view>
      </view>
      <view class="approval-avatar blue">张</view>
    </view>
    <view class="approval-item">
      <view class="approval-circle blue"></view>
      <view class="approval-info">
        <view class="approval-name">审批人（学院副书记）</view>
        <view class="approval-person">ZHOUBIN <text class="status审批中">审批中</text></view>
      </view>
      <view class="approval-avatar blue">Z</view>
    </view>
    <view class="approval-item">
      <view class="approval-circle orange"></view>
      <view class="approval-info">
        <view class="approval-name">抄送人</view>
        <view class="approval-person">学工部张钊副部长、学工部房海宁副部长学院副书记、学工部刘元印、学工办主任心理中心教师孙红勇</view>
      </view>
      <view class="approval-avatar blue">L</view>
    </view>

    <view class="save-tip">已为您实时保存数据</view>

    <!-- 操作按钮 -->
    <view class="btn-group">
      <button class="submit-btn" type="primary">提交审批</button>
      <button class="draft-btn">保存草稿</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const goBack = () => {
  // 这里可添加返回逻辑，如 uni.navigateBack()
};
</script>

<style scoped>
.container {
  padding: 10px;
  background-color: #ffffff;
  min-height: 100vh;
  box-sizing: border-box;
}

.steps {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 20px;
  width: 90%; /* 步骤条整体宽度缩短为原来的90% */
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(1.1); /* 步骤项整体放大10% */
}

.step-num {
  width: 26.4px; /* 原24px放大10% */
  height: 26.4px; /* 原24px放大10% */
  border-radius: 50%;
  background-color: #007aff;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4.4px; /* 原4px放大10% */
}

.step-num-gray {
  width: 26.4px; /* 原24px放大10% */
  height: 26.4px; /* 原24px放大10% */
  border-radius: 50%;
  background-color: #cccccc;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4.4px; /* 原4px放大10% */
}

.step-text {
  font-size: 12px;
  color: #333333;
}

.step-text-blue {
  font-size: 12px;
  color: #007aff; /* 第一步文字改为蓝色 */
}

.step-text-gray {
  font-size: 12px;
  color: #cccccc;
}

.step-line {
  flex: 1;
  height: 1px;
  background-color: #cccccc;
  margin: 0 8px; /* 步骤线之间的间距缩短 */
}
/* 表单容器样式 */
.form-container {
  background-color: #f5f5f5;
  padding: 16px;
}
.form-item {
  margin-bottom: 16px;
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
}
.form-label {
  margin-bottom: 8px;
}
.label-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.tips {
  background-color: #fff9e6;
  padding: 8px;
  border-radius: 4px;
  margin-top: 4px;
}
.tips-text {
  font-size: 12px;
  color: #666;
}
.form-input {
  width: 100%;
  min-height: 80px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
}

/* 审批流程样式 */
.approval-title {
  font-size: 16px;
  font-weight: bold;
  margin: 16px 0 8px;
}
.approval-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.approval-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 8px;
}
.orange {
  background-color: #ff9500;
}
.blue {
  background-color: #007AFF;
}
.approval-info {
  flex: 1;
}
.approval-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}
.approval-person {
  font-size: 13px;
  color: #666;
}
.status {
  color: #007AFF;
  margin-left: 4px;
}
.status审批中 {
  color: #ff9500;
  margin-left: 4px;
}
.approval-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #007AFF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.save-tip {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin: 8px 0;
}

/* 按钮组样式 */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.submit-btn {
  background-color: #007AFF;
  color: #fff;
  border-radius: 8px;
  height: 44px;
  width: 350px;
  left:-10px;
}
.draft-btn {
  background-color: #fff;
  color: #007AFF;
  border: 1px solid #007AFF;
  border-radius: 8px;
  height: 44px;
  width: 350px;
  left:-10px;
}
</style>